<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>

</head>

<body>
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3666235_qlur58pnda.css" />
  <style>
    .content {
      display: flex;
      align-items: center;
    }

    ul {
      height: 300px;
    }

    .active {
      background-color: red;
    }

    .progress {
      position: fixed;
      top: 0;
      background-color: aquamarine;
      height: 3px;
      left: 0;
    }
  </style>
  <div id="app">
    <div class="progress" :style="{width:w+'%'}"></div>
    <div class="content" v-html="content">

    </div>
  </div>
</body>
<script type="module">
  import str from './word.js'
  const {
    createApp,
    ref,
    reactive,
    computed,
    onMounted
  } = Vue;

  const app = createApp({

    setup() {
      let content = ref(str)
      let w = ref(0)
      onMounted(() => {
        let maxNum = Math.floor(document.documentElement.scrollHeight - window.innerHeight)
        console.log(maxNum)
        window.onscroll = function (e) {
          let top = Math.ceil(document.documentElement.scrollTop)
          console.log(top)
          w.value = top / maxNum * 100
        }
      })
      return {
        content,
        w
      }
    }

  })
  app.mount('#app')
</script>

</html>